<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="5">
        <OrgTree @nodeClick="onOrgClick" @update="onOrgUpdate"></OrgTree>
      </a-col>
      <a-col :span="19">
        <a-card size="small">
          <a-tabs type="card" v-model="tab">
            <a-tab-pane :key="1" tab="基本信息"></a-tab-pane>
            <a-tab-pane :key="2" tab="人员管理"></a-tab-pane>
            <a-button v-if="tab===2" type="link" slot="tabBarExtraContent">
              <i class="fa fa-plus-circle mr5"/>添加人员
            </a-button>
          </a-tabs>
          <div class="scroll" :style="{height:`${winHeight-230}px`}">
            <OrgInfo v-if="tab===1" :orgId="orgId"></OrgInfo>
            <OrgUser v-if="tab===2" :orgId="orgId"></OrgUser>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import OrgTree from './OrgTree'
import OrgInfo from './OrgInfo'
import OrgUser from './OrgUser'
export default {
  components: {
    OrgTree, OrgInfo, OrgUser
  },
  data () {
    return {
      orgId: '',
      tab: 1
    }
  },
  mounted () {
  },
  methods: {
    onOrgClick (org) {
      this.orgId = org.key
    },
    onOrgUpdate () {
      const oldId = this.orgId
      this.orgId = null
      setTimeout(() => {
        this.orgId = oldId
      }, 100)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
